<template>
	<!-- <view style="height: 2000rpx;width: 12000rpx;">
		<map style="height: 2000rpx;width: 12000rpx;" :latitude="latitude" :longitude="longitude" :scale="4"
			:markers="markers"></map>
	</view> -->
	<view class="text-df">
		<view class="bg-white padding-lr-sm text-lg"
			style="line-height: 80rpx; justify-content: center; text-align: center;" @click="show=true">{{select}}
		</view>
		<u-picker :loading="loading" :show="show" ref="uPicker" @cancel="show=false" :columns="columns"
			@confirm="confirm" @change="changeHandler"></u-picker>
		<u-line>
		</u-line>
		<view class="bg-white">
			<u-tabs :list="tab_list" lineColor="#43a0ff" :current="tab_current"
				:activeStyle="{color: '#43a0ff', 'font-weight': 'bold' }" @change="tab_change">
			</u-tabs>
		</view>

		<view v-if='tab_current === 0' v-for="(item,index) in adviseList[tab_current].records" :key="index"
			class="margin-top-sm bg-white padding-sm flex-row" @click="to_detail(item.id)" @longpress="showPopup(index)"
			style="position: relative;">
			<image :src="item.imageList[0].url" mode="aspectFill" style="width: 180rpx; height: 180rpx;"></image>
			<view class="margin-left-sm margin-top-xs" style="width: 500rpx;">
				<view class="flex-row-bt">
					<view class="text-lg text-bold text-overhidden-2" style="width: 70%;">{{item.location}}</view>
					<view class="text-red">{{item.state}}</view>
				</view>
				<view class="margin-top-sm">{{item.firstAddress}}{{item.firstAddress!==null?"":'/'}}{{item.secondAddress}}</view>
				<view class="margin-top-sm">{{item.createTime}}</view>
			</view>
			<view class="delete-button" v-if="deleindex === index" @click="Deleteid(item.id)" :data-id="item.id">删除
			</view>
		</view>
		<view v-if='tab_current === 1' v-for="(item,index) in adviseList[tab_current].records" :key="index"
			class="margin-top-sm bg-white padding-sm flex-row" @click="to_detail(item.id)" @longpress="showPopup(index)"
			style="position: relative;">
			<image :src="item.imageList[0].url" mode="aspectFill" style="width: 180rpx; height: 180rpx;"></image>
			<view class="margin-left-sm margin-top-xs" style="width: 500rpx;">
				<view class="flex-row-bt">
					<view class="text-lg text-bold text-overhidden-2" style="width: 70%;">{{item.location}}</view>
					<view class="text-red">{{item.state}}</view>
				</view>
				<view class="margin-top-sm">{{item.firstAddress}}/{{item.secondAddress}}</view>
				<view class="margin-top-sm">{{item.createTime}}</view>
			</view>
			<view class="delete-button" v-if="deleindex === index" @click="Deleteid(item.id)" :data-id="item.id">删除
			</view>
		</view>
		<view v-if='tab_current === 2' v-for="(item,index) in adviseList[tab_current].records" :key="index"
			class="margin-top-sm bg-white padding-sm flex-row" @click="to_detail(item.id)" @longpress="showPopup(index)"
			style="position: relative;">
			<image :src="item.imageList[0].url" mode="aspectFill" style="width: 180rpx; height: 180rpx;"></image>
			<view class="margin-left-sm margin-top-xs" style="width: 500rpx;">
				<view class="flex-row-bt">
					<view class="text-lg text-bold text-overhidden-2" style="width: 70%;">{{item.location}}</view>
					<view class="text-red">{{item.state}}</view>
				</view>
				<view class="margin-top-sm">{{item.firstAddress}}/{{item.secondAddress}}</view>
				<view class="margin-top-sm">{{item.createTime}}</view>
			</view>
			<view class="delete-button" v-if="deleindex === index" @click="Deleteid(item.id)" :data-id="item.id">删除
			</view>
		</view>
		<view v-if='tab_current === 3' v-for="(item,index) in adviseList[tab_current].records" :key="index"
			class="margin-top-sm bg-white padding-sm flex-row" @click="to_detail(item.id)" @longpress="showPopup(index)"
			style="position: relative;">
			<image :src="item.imageList[0].url" mode="aspectFill" style="width: 180rpx; height: 180rpx;"></image>
			<view class="margin-left-sm margin-top-xs" style="width: 500rpx;">
				<view class="flex-row-bt">
					<view class="text-lg text-bold text-overhidden-2" style="width: 70%;">{{item.location}}</view>
					<view class="text-red">{{item.state}}</view>
				</view>
				<view class="margin-top-sm">{{item.firstAddress}}/{{item.secondAddress}}</view>
				<view class="margin-top-sm">{{item.createTime}}</view>
			</view>
			<view class="delete-button" v-if="deleindex === index" @click="Deleteid(item.id)" :data-id="item.id">删除
			</view>
		</view>
		<divider marginTop="40rpx" marginBottom="40rpx"></divider>
	</view>
</template>

<script>
	import {
		getFirstAddress,
		getSecondAddress
	} from '../../api/address_api.js'
	import {
		getAdvisePage,
		deleteAdvise
	} from '../../api/advise_api.js'
	import {
		getToken
	} from '@/utils/auth'

	export default {
		data() {
			return {
				// 删除按钮控制器
				deleindex: null,
				loading: true,
				showDelete: false,
				firstAddress: '',
				secondAddress: '',
				phone: '',
				pageIndex: '',
				locationList: [],
				addressList: [],
				timeList: [{
						timeType: -1,
						time: '全部'
					},
					{
						timeType: 0,
						time: '一天内'
					},
					{
						timeType: 1,
						time: '三天内'
					},
					{
						timeType: 2,
						time: '七天内'
					},
					{
						timeType: 3,
						time: '一月内'
					},
					{
						timeType: 4,
						time: '半年内'
					}
				],

				time: '全部',
				adviseList: [{
						total: 0,
						records: []
					},
					{
						total: 0,
						records: []
					},
					{
						total: 0,
						records: []
					},
					{
						total: 0,
						records: []
					}
				],
				tab_list: [{
					name: '待分配',
					badge: {
						value: 5,
					}
				}, {
					name: '待处理',
					badge: {
						value: 5,
					}
				}, {
					name: '待审核',
					badge: {
						value: 5,
					}
				}, {
					name: '已完成',
					badge: {
						value: 5,
					}
				}],
				tab_current: 0,

				select: '全部',
				//级联选择器
				show: false,

				columns: [],
				columnData: []
				// latitude: 113.7754,
				// longitude: 27.6401,
				// scale: 14, // 设置地图的缩放级别
				// markers: [ // 设置标记点
				// 	{
				// 		latitude: 113.732754,
				// 		longitude: 27.640671,
				// 		title: 'New York City',
				// 		iconPath: '../static/icon.png',
				// 	},
				// ],
			};
		},
		// 下拉到底部后加载新数据
		onReachBottom() {
			this.getPageData()
			console.log('下拉刷新')
			//判断下一页是否存在数据，不存在将显示暂无数据等提示语
			// if (this.productList.length < this.pageIndex * 10) {
			//   this.isOver = true;
			// }
			// this.pageIndex++;//页数加一
			// this.findData();//回调接口
		},
		onPullDownRefresh(){
			this.adviseList=[{
					total: 0,
					records: []
				},
				{
					total: 0,
					records: []
				},
				{
					total: 0,
					records: []
				},
				{
					total: 0,
					records: []
				}
			],
			this.getPageData()
			setTimeout(()=> {
				uni.stopPullDownRefresh();
			}, 2000);
		},
		created() {
			this.getPageData()
		},
		methods: {
			// 初始化页面数据
			getPageData() {
				let code = uni.getStorageSync('code')
				console.log(code)
				if (code == getApp().globalData.firstCode) {
					this.getFirstAddress()
					this.getSecondAddress(0)
					// (phone,index, firstAddress, secondAddress, stateCode, timeType, address, key)
					this.getAdvisePage("", 0, "", "", 0, -1, "", "")
					this.getAdvisePage("", 1, "", "", 1, -1, "", "")
					this.getAdvisePage("", 2, "", "", 3, -1, "", "")
					this.getAdvisePage("", 3, "", "", 4, -1, "", "")
				} else if (code == getApp().globalData.secondCode) {
					this.getAdminAddress()
					this.getFirstAddress()
				} else {
					this.getMyInfo()
					this.getFirstAddress()
				}
				this.code = code
			},
			// 获取二级管理员辖区列表
			getAdminAddress() {
				let addressList = uni.getStorageSync('addressList')
				let secondAddress = uni.getStorageSync('address')
				this.getAdvisePage("", 0, "", secondAddress, 0, -1, "", "")
				this.getAdvisePage("", 1, "", secondAddress, 1, -1, "", "")
				this.getAdvisePage("", 2, "", secondAddress, 3, -1, "", "")
				this.getAdvisePage("", 3, "", secondAddress, 4, -1, "", "")
				if (addressList.length > 1) {
					this.addressList = addressList
					this.secondAddress = secondAddress
				} else {
					this.secondAddress = secondAddress
				}
			},
			// 获取群众手机号
			getMyInfo() {
				let phone = uni.getStorageSync('phone')
				console.log(phone)
				this.getAdvisePage(phone, 0, "", "", 0, -1, "", "")
				this.getAdvisePage(phone, 1, "", "", 1, -1, "", "")
				this.getAdvisePage(phone, 2, "", "", 3, -1, "", "")
				this.getAdvisePage(phone, 3, "", "", 4, -1, "", "")
				this.phone = phone
			},
			//获取一级辖区列表
			getFirstAddress() {
				getFirstAddress().then(res => {
					console.log(res.data)
					this.locationList = res.data
					let arr = []
					arr = res.data.map(item => item.address);
					arr = ['全部', ...arr]
					this.columns = [arr, ['全部']]
					this.loading = false
				})
			},
			//获取二级辖区列表
			getSecondAddress(id) {
				getSecondAddress(id).then(res => {
					this.columnData = res.data.map(item => (item.address))
					this.loading = false
				})
			},
			// 条件查找所有建议
			getAdvisePage(phone, index, firstAddress, secondAddress, stateCode, timeType, address, key) {
				let adviseList = this.adviseList
				let advise = adviseList[index]
				if (advise.records.length < advise.total || advise.total == 0) {
					let pageSize = 25
					let page = Number(advise.records.length / pageSize) + 1

					getAdvisePage(phone, page, pageSize, firstAddress, secondAddress, stateCode, timeType, address, key)
						.then(res => {
							this.tab_list[index].badge.value = res.data.total
							advise.records = advise.records.concat(res.data.records)
							adviseList[index] = advise
							this.adviseList = adviseList
							this.adviseList[index].total = res.data.total
						})
				}
				console.log(this.adviseList)
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					this.loading = true
					if (index === 0) {
						this.loading = false
					} else {
						let targetObject = this.locationList.find(obj => obj.address === this.columns[0][index]);
						// 如果找到了具有匹配 name 属性值的对象，则获取其 id 属性值
						if (targetObject) {
							let idValue = targetObject.id;
							console.log(idValue)
							getSecondAddress(idValue).then(res => {
								console.log(res)
								this.columnData = res.data.map(item => (item.address))
								this.columnData = ['全部', ...this.columnData]
								this.loading = false
								picker.setColumnValues(1, this.columnData)
							})
						}
					}

					// this.columnData = this.getSecondAddress(index)
					//    uni.$u.sleep(1500).then(() => {
					// console.log(this.columnData,'2323232')
					//  })
					// picker为选择器this实例，变化第二列对应的选项
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', this.columns)
				this.firstAddress = e.value[0]
				this.firstAddress == "全部" ? "" : e.value[0]
				this.secondAddress = "全部" ? "" : e.value[1]
				this.select = e.value[0] + '/' + e.value[1]
				this.check()
			},
			// 重置筛选数据
			reset() {},
			// 条件查询数据
			check() {
				this.adviseList = [{
						total: 0,
						records: []
					},
					{
						total: 0,
						records: []
					},
					{
						total: 0,
						records: []
					},
					{
						total: 0,
						records: []
					}
				]
				let phone = this.phone
				let firstAddress = this.firstAddress == "全部" ? "" : this.firstAddress
				this.getAdvisePage(phone, 0, firstAddress, this.secondAddress, 0, this.timeType, this.address, this.key)
				this.getAdvisePage(phone, 1, firstAddress, this.secondAddress, 1, this.timeType, this.address, this.key)
				this.getAdvisePage(phone, 2, firstAddress, this.secondAddress, 3, this.timeType, this.address, this.key)
				this.getAdvisePage(phone, 3, firstAddress, this.secondAddress, 4, this.timeType, this.address, this.key)
				this.show = false
			},
			to_detail(e) {
				if (this.tab_current == 0) {
					//待分配
					uni.navigateTo({
						url: '/pages/work/allocated?id=' + e
					})
				} else if (this.tab_current == 1) {
					//待处理
					uni.navigateTo({
						url: '/pages/work/pending?id=' + e
					})
				} else if (this.tab_current == 2) {
					//待审核
					uni.navigateTo({
						url: '/pages/work/checking?id=' + e
					})
				} else if (this.tab_current == 3) {
					//已完成
					uni.navigateTo({
						url: '/pages/work/finished?id=' + e
					})
				}
			},
			// 长按删除
			showPopup(e) {
				if (this.deleindex != e) {
					this.deleindex = e
				} else {
					this.deleindex = null
				}
			},
			Deleteid(e) {
				uni.showModal({
					title: '提示',
					content: '确定删除吗',
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						if (res.confirm) {
							deleteAdvise(e).then(Response => {
								if (Response.code === 200) {
									uni.showToast({
										icon: "success",
										title: '删除成功',
									});
									this.deleindex = null;
									this.adviseList[this.tab_current].records = this.adviseList[this
										.tab_current].records.filter(item => item.id !== e);
									console.log(this.tab_current)
								}
							});
						} else if (res.cancel) {
							this.deleindex = null;
						}

					}
				})
			},
			tab_change(e) {
				console.log(JSON.stringify(e))
				this.tab_current = JSON.parse(JSON.stringify(e)).index
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.delete-button {
		position: absolute;
		z-index: 9;
		right: 0;
		width: 100rpx;
		height: 50rpx;
		margin-top: 80rpx;
		margin-right: 20rpx;
		font-size: 30rpx;
		background-color: red;
		color: white;
		padding: 5rpx 10rpx;
		border-radius: 20rpx;
		text-align: center;
		align-items: center;
	}
</style>